<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		div{
		   width: 200px;
           height: 200px;
           border: 2px solid black;
           background:red;
		}
		div[a=b]{
			background: yellow;
		}
	</style>
</head>
<body>
	<div id="box">
		
	</div>
</body>
</html>
<script>
	//获取元素
	var boxDiv = document.getElementById("box");

	//设置行内属性
	boxDiv.setAttribute("a","b");

	//获取属性
	console.log(boxDiv.getAttribute("a"));

	setTimeout(function(){
		//移除属性
		boxDiv.removeAttribute("a");
	},5000);

	//创建元素
	var oImg = document.creatElement("img");
	oImg.src = "q1.jpg";
	//拼接子元素
	document.body.appendChild(oImg);

	//创建input
	var oInput = document.creatElement("input");
	oInput.type = "text";
	//oInput.playholder = "请输入密码";
	oInput.value = "你好吗";


	document.body.appendChild(oInput);

	//获取元素父结点
	console.log(oInput.parenElement);

	//将oinput 插入到 oImg前面
	document.body.insertBefore(oInput,oImg);

	//用oInput 替换 oImg
	document.body.replaceChild(oInput,oImg);

	//删除子元素
	document.body.removeChild(boxDiv);

	//删除节点
	oInput.remove();

	var comment = document.body.childNodes[1];
	console.log(comment);

	document.body.removeChild(comment);
</script>